<template>
  <div>
    <p>新用户注册</p>
    用户名：<input type="text" v-model="newUser.username" @blur="checkUser()">{{ nameInfo }}<br>
    密码：<input type="password" v-model="newUser.password"><br>
    密码确认：<input type="password" v-model="confirm" @blur="confirmPassword()">{{ confirmInfo }}<br>
    邮箱：<input type="text" v-model="newUser.email"><br>
    头像：
    <div>
      <input type="radio" v-model="newUser.face" value="1.jpg"><img src="/project/face/1.jpg" width="50" height="50">
      <input type="radio" v-model="newUser.face" value="2.jpg"><img src="/project/face/2.jpg" width="50" height="50">
      <input type="radio" v-model="newUser.face" value="3.jpg"><img src="/project/face/3.jpg" width="50" height="50">
      <input type="radio" v-model="newUser.face" value="4.jpg"><img src="/project/face/4.jpg" width="50" height="50">
    </div>
    <input type="button" value="注册" @click="registerUser()">
    <input type="button" value="重置" @click="this.newUser={}">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      newUser: {face:"1.jpg"},
      nameInfo: "",
      confirm: "",
      confirmInfo: "",
    }
  }, methods: {
    checkUser() {
      this.nameInfo = "";
      axios.get("/project/user/checkUser", {
        params: this.newUser
      }).then(resp => {
        if (resp.data != "") {
          this.nameInfo = "该用户已存在"
        } else {
          this.nameInfo = "可以使用"
        }
      })
    },
    registerUser() {
      if (this.nameInfo=="可以使用" && this.confirmInfo != "两次密码不一致") {
        axios.get("/project/user/register", {
          params: this.newUser
        }).then(resp => {
          if (resp.data == "ok") {
            this.$router.push("/login");
          }
        })
      }
    },
    confirmPassword() {
      if (this.newUser.password != this.confirm) {
        this.confirmInfo = "两次密码不一致";
      } else {
        this.confirmInfo = "";
      }
    }
  }
}
</script>

<style scoped>

</style>